<template>
  <div id="cusInfo">
    <div class="cusInfo-content">
         <div class="cusInfo-content-box">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <div id="baseInfo">
                        <h3 class="baseInfo_title">账号基本信息</h3>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="账号名称" prop="userName"
                            :rules="[{required:true,message:'请输入客户名称',trigger: 'blur'}]">
                                <el-input v-model="form.userName"></el-input>
                                <!-- <span class="item-tip-span">4-16个字符的数字、英文字母、下划线，中间不能有空格</span> -->
                            </el-form-item>
                            <el-form-item label="登录用户名" prop="loginName"
                            :rules="[{required:true,message:'请输入用户名',trigger: 'blur'}]">
                                <el-input v-model="form.loginName"></el-input>
                                <span class="item-tip-span">4-16个字符的数字、英文字母、下划线，中间不能有空格</span>
                            </el-form-item>
                           <el-form-item prop="email" label="E-MAIL"
                                :rules="[
                                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                                ]">
                                <el-input v-model="form.email"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码">
                                <el-input type="number" v-model="form.mobile"></el-input>
                            </el-form-item>
                        </el-form>

                        <div class="groupBtn">
                          <el-button type="primary" @click="onSubmit">保存</el-button>
                        </div>
                    </div>
                </el-tab-pane>
              
                <el-tab-pane label="权限设置" name="third">
                  <div id="monitorCase">
                    <h3 class="baseInfo_title">客户管理
                      <el-switch v-model="monitorCase.dataAnaly"></el-switch>
                    </h3>
                    <div class="personality-li">
                      <span class="li-span2" style="width:120px">浏览客户信息</span>
                      <el-radio v-model="monitorCase.trend" label="1">开启</el-radio>
                      <el-radio v-model="monitorCase.trend" label="2">关闭</el-radio>
                    </div>
                    <div class="personality-li">
                      <span class="li-span2" style="width:120px">开通客户账号</span>
                      <el-radio v-model="monitorCase.media" label="1">开启</el-radio>
                      <el-radio v-model="monitorCase.media" label="2">关闭</el-radio>
                    </div>
                    <div class="personality-li">
                      <span class="li-span2" style="width:120px">修改客户权限</span>
                      <el-radio v-model="monitorCase.motion" label="1">开启</el-radio>
                      <el-radio v-model="monitorCase.motion" label="2">关闭</el-radio>
                    </div>
                    <el-divider></el-divider>
                    <h3 class="baseInfo_title">日志管理
                      <el-switch v-model="monitorCase.logManage"></el-switch>
                    </h3>
                    <div class="personality-li">
                      <span class="li-span2" style="width:140px">修改客户操作信息</span>
                      <el-radio v-model="monitorCase.editCus" label="1">开启</el-radio>
                      <el-radio v-model="monitorCase.editCus" label="2">关闭</el-radio>
                    </div>
                    <div class="personality-li">
                      <span class="li-span2" style="width:140px">查看客户登录信息</span>
                      <el-radio v-model="monitorCase.viewCus" label="1">开启</el-radio>
                      <el-radio v-model="monitorCase.viewCus" label="2">关闭</el-radio>
                    </div>
                    
                    <div class="groupBtn">
                      <el-button type="primary">重置</el-button>
                      <el-button type="danger">保存</el-button>
                    </div>
                  </div>
                </el-tab-pane>
               
            </el-tabs>
         </div>
    </div>






  </div>
</template>

<script>
import '../assets/css/cusInfo.css'
export default {
  name: 'HelloWorld',
  data () {
    return {
        activeName: 'first',
        form: {
          userName: '',
          loginName: '',
          email: '',
          mobile: ''
        },
        userId: '',
        monitorCase:{
          dataAnaly: true,
          logManage: true,
          trend: '1',
          media: '1',
          motion: '1',
          keyWord: '1',
          editCus: '1',
          viewCus: '1'
        }
        
    }
  },
  created(){
    this.userId = this.$route.params.userId;
    this.userDetail(this.userId);
  },
  methods: {
    userDetail(userId){
        let param = userId;
        this.$Api.userDetail(param).then(res => {
            console.log(res)
            if(res.code == '200'){
                this.form.userName = res.data.userName;
                this.form.loginName = res.data.loginName;
                this.form.email = res.data.email;
                 this.form.mobile = res.data.mobile;
            }
        })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log('submit!');
      this.form.id = this.userId;
      this.$refs.form.validate(valid => {
          if (valid) {
              this.$Api.editSystemUser(this.form);
          } else {
              return false;
          }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
     handleCheckAllChange() {
      // this.checkedCities = val ? cityOptions : [];
      // this.isIndeterminate = false;
    },
    handleCheckedCitiesChange() {
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  },
  components:{
  }
}
</script>
<style>
/* #pageHome{
background: #ccc;
width:calc(100% - 200px);
} */

</style>
